<template>
	<view class="page mechanism">
		<view class='gswTitle'>
			<view class="gswTL">
				<text class="linetitle"></text>
				<text>优秀商家</text>
			</view>
			<view class="gswTR" @tap='tapFun' data-type="more">更多<image src='/static/images/goIcon.png' style="margin-right: -10rpx;"></image>
				<image src='/static/images/goIcon.png'></image>
			</view>
		</view>
		<view class="mechanism_main">
			<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			 @up="upCallback">
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../../static/img/jing.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
								距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../../static/img/ying.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
								距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../../static/img/tong.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
								距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			uniRate
		},
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					}
				}
			};
		},
		methods: {
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// let params = {
				// 	page_size: page.size,
				// 	page: page.num,
				// 	random_str: this.$dokey.getRandom(),
				// 	timestamp: this.$dokey.getTime(),
				// 	method: 'website.mould.log.list',
				// 	sign: this.$md5(this.$dokey.secretdate('website.mould.log.list'))
				// }
				// requestAll(params).then(resp => {
				// 	if (resp.code == 1) {
				// 		let data = resp.response_data
				// 		if (page.num == 1) this.dataArray = []; //如果是第一页需手动制空列表
				// 		this.dataArray = this.dataArray.concat(data.list); //追加新数据
				// 		if (page.num == 1) this.previewList = []
				// 		this.previewList = this.previewList.concat(data.list);
				// 		this.pageTotal = data.total_page
				// 		this.mescroll.endByPage(data.list.length, this.pageTotal);
				// 	}
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			}
		}
	}
</script>

<style lang="scss">
	.mechanism {
		.gswTitle {
			display: flex;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			height: 80rpx;
			color: #999;
			padding: 0 25rpx;

			.gswTL {
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				font-size: 24rpx;

				.linetitle {
					width: 8rpx;
					height: 42rpx;
					background-color: #E5222E;
					margin-right: 28rpx;

				}

				text {
					font-size: 30rpx;
					margin-right: 5rpx;
					color: #000;
				}
			}

			.gswTR {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.mechanism_main {
			.mechanism_main_item {
				box-sizing: border-box;
				display: flex;
				width: 100%;
				margin-bottom: 12rpx;
				padding: 20upx 25rpx;
				background-color: #ffffff;

				.mechanism_main_item_left {
					flex: 0 0 160rpx;
					width: 161rpx;
					height: 161rpx;
					margin-right: 30rpx;
					overflow: hidden;

					image {
						display: block;
						margin: 0rpx auto;
						width: 100%;
						min-height: 100%;
					}
				}

				.mechanism_main_item_right {
					flex: 1;
					box-sizing: border-box;
					position: relative;
					.text1 {
						line-height: 45rpx;
						margin-bottom: 16rpx;
						.title {
							max-width: 300rpx;
							line-height: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 32rpx;
						}

						image {
							display: block;
							margin-left: 12rpx;
							width: 31rpx;
							height: 31rpx;
						}
					}

					.text2 {
						margin-bottom: 6rpx;
						view {
							font-size: 24rpx;

							text {
								display: inline-block;
								border: 1px solid #368AFF;
								height: 32rpx;
								margin-right: 16rpx;
								padding: 0 16rpx;
								line-height: 32rpx;
								border-radius: 16rpx;
								color: #368AFF;
							}
						}
					}

					.text3 {
						margin-bottom: 10rpx;
						view {
							.pingfen {
								display: inline-block;
							}
						}
						}
					}
					.text4 {
						font-size: 25rpx;
						color: #B3B3B3;
						line-height: 100%;
					}
					.serverNum {
						position: absolute;
						right: 0;
						bottom: 39rpx;
						font-size: 25rpx;
						color: #B3B3B3;
				}
			}
		}
	}
</style>
